<!--
 * @Author: your name
 * @Date: 2021-10-18 14:59:45
 * @LastEditTime: 2021-10-18 15:10:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /a1902-a-group/admin_pc/src/component/TodoList.vue
-->
<template>
  <div>
      <span>todoList</span>
      <input type="text" name="" :value="inputValue" @input="handleInput" id="">
      <button @click="changeAdd(inputValue)">添加</button>

      <div>
          <ul>
              <li v-for="(item, index) in list" :key="index">{{item}}</li>
          </ul>
      </div>
  </div>
</template>

<script>
import {ref, reactive} from 'vue'

// 输入框要触发的事件
const inputEffect = () => {
    let inputValue = ref('');
     // 输入框触发的事件
    const handleInput = (e) => {
        inputValue.value = e.target.value
    }
    return {
        inputValue,
        handleInput
    }
}

// list 要触发的事件
const listEffect = () => {
    let list = reactive([]);
    // 添加列表
    const changeAdd = (value) => {
        list.push(value)
    }
    return {
        list,
        changeAdd
    }
}
export default {
    setup() {
        let {inputValue, handleInput} = inputEffect();
        let {list, changeAdd} = listEffect();

        return {
            inputValue,
            list,
            handleInput,
            changeAdd
        }
    }
}
</script>

<style>

</style>